<template>
  <div class="personal">
    <div class="container">
      <div class="w clearfix">
        <div class="menu-list">
          <el-row class="tac">
            <el-col :span="24">
              <el-menu background-color="#00b16a" text-color="#fff" active-text-color="#fff" default-active="personalHome" class="el-menu-vertical-demo" :router="true">
                <el-menu-item index="personalHome">
                  <span slot="title">用户首页</span>
                </el-menu-item>
                <el-menu-item index="sellingRecord">
                  <span slot="title">委托记录</span>
                </el-menu-item>
                <!-- <el-menu-item index="appointmentRecord">
                  <span slot="title">预约记录</span>
                </el-menu-item> -->
                <!-- <el-menu-item index="collectionRecord">
                    <span slot="title">收藏管理</span>
                </el-menu-item> -->
                <el-menu-item index="transactionProgress">
                  <span slot="title">交易进度</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </div>

        <div class="content">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
export default {
  name: "Personal",

  components: {
    Header,
    Footer,
  },
  created() {
    let isLogin = false;
    if (this.$cookies.get('__tk')) {
      isLogin = true;
    } else {
      isLogin = false;
      this.goPage('Home')
      this.$message.warning('请登录')
    }
    let oj = {
      title: '落新家',
      nav: 'Home',
      isLogin: isLogin
    };
    this.$emit('isTitle', oj);
  },
  mounted() {
    this.$nextTick(() => {
      document.body.scrollTo(0, 0);
      window.scrollTo(0, 0);
      document.getElementById('index').scrollTop = 0
      window.pageYOffset = 0;
    })
  },
  methods: {
    goPage(n) {
      this.$router.push({ name: n });
    },
  },
};
</script>
<style lang="less" scoped>
@theme: #00b16a;
.personal {
  .container {
    padding-bottom: 50px;
    background-color: #ddd;
  }
  .w {
    display: flex;
  }
  .menu-list {
    height: 1000px;
    background-color: @theme;
    margin-top: 10px;
    margin-right: 20px;
    flex: 16%;
    text-align: center;
  }

  .content {
    flex: 84%;
    margin-top: 10px;
    background-color: #fff;
    padding: 40px;
  }
}
</style>